<template>
  <div class="h100 layout">
    <header >
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>

    <main>
      <slot name="form"></slot>
      <slot name="main"></slot>
    </main>

    <footer v-if="isShowFoot">尾部</footer>
  </div>
</template>

<script>
export default {
  props: {
    //   是否展示头部
    isShowHead: {
      type: Boolean,
      default: true,
    },
    // 头部标题
    title: {
      type: String,
      default: "默认标题",
    },
    // 是否展示底部
    isShowFoot: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  line-height: 46px;
}

main {
  flex: 1;
}

footer {
  text-align: center;
  line-height: 46px;
}
</style>